<%@ include file="../common/top.jsp"%>

<div id="Catalog">


  <form action="confirmOrder" method="post">
  <table>
    <tr>
      <th colspan=2>Payment Details</th>
    </tr>
    <tr>
      <td>Card Type:</td>
      <td>
        <select name="order.cardType">
        <option value="Visa" ${sessionScope.order.cardType=='Visa'?'selected':''}>Visa</option>
        <option value="MasterCard" ${sessionScope.order.cardType=='MasterCard'?'selected':''}>MasterCard</option>
        <option value="American Express" ${sessionScope.order.cardType=='American Express'?'selected':''}>American Express</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Card Number:</td>
      <td><input type="text" name="order.creditcard" value="${sessionScope.order.creditcard}"> * Use a fake number!</td>
    </tr>
    <tr>
      <td>Expiry Date (MM/YYYY):</td>
      <td><input type="text" name="order.expiryDate" value="${sessionScope.order.exprdate}"></td>
    </tr>


    <tr>
      <th colspan=2>Billing Address</th>
    </tr>

    <tr>
      <td>First name:</td>
      <td>${sessionScope.order.billToFirstName}</td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td>${sessionScope.order.billToLastName}</td>
    </tr>
    <tr>
      <td>Address 1:</td>
      <td>${sessionScope.order.billAddress1}</td>
    </tr>
    <tr>
      <td>Address 2:</td>
      <td>${sessionScope.order.billAddress2}</td>
    </tr>
    <tr>
      <td>City:</td>
      <td>${sessionScope.order.billCity}</td>
    </tr>
    <tr>
      <td>State:</td>
      <td>${sessionScope.order.billState}</td>
    </tr>
    <tr>
      <td>Zip:</td>
      <td>${sessionScope.order.billZip}</td>
    </tr>
    <tr>
      <td>Country:</td>
      <td>${sessionScope.order.billCountry}</td>
    </tr>

    <tr>
      <td colspan=2>
        <input type="checkbox" value="true" id="check" name="Ship" onchange="toggleShippingAddress()">Ship to different address...
      </td>
    </tr>

    <!--未选中前的隐藏填写区域-->
    <tr id="shippingAddressRow" style="display: none;">
      <th colspan="2">Shipping Address</th>
    </tr>

    <!-- Shipping Address Form - Initially hidden -->
    <tr id="shippingFirstNameRow" style="display: none;">
      <td>First name:</td>
      <td><input type="text" name="shippingFirstName" value="${sessionScope.order.billToFirstName}"></td>
    </tr>
    <tr id="shippingLastNameRow" style="display: none;">
      <td>Last name:</td>
      <td><input type="text" name="shippingLastName" value="${sessionScope.order.billToLastName}"></td>
    </tr>
    <tr id="shippingAddress1Row" style="display: none;">
      <td>Address 1:</td>
      <td><input type="text" name="shippingAddress1" value="${sessionScope.order.billAddress1}"></td>
    </tr>
    <tr id="shippingAddress2Row" style="display: none;">
      <td>Address 2:</td>
      <td><input type="text" name="shippingAddress2" value="${sessionScope.order.billAddress2}"></td>
    </tr>
    <tr id="shippingCityRow" style="display: none;">
      <td>City:</td>
      <td><input type="text" name="shippingCity" value="${sessionScope.order.billCity}"></td>
    </tr>
    <tr id="shippingStateRow" style="display: none;">
      <td>State:</td>
      <td><input type="text" name="shippingState" value="${sessionScope.order.billState}"></td>
    </tr>
    <tr id="shippingZipRow" style="display: none;">
      <td>Zip:</td>
      <td><input type="text" name="shippingZip" value="${sessionScope.order.billZip}"></td>
    </tr>
    <tr id="shippingCountryRow" style="display: none;">
      <td>Country:</td>
      <td><input type="text" name="shippingCountry" value="${sessionScope.order.billCountry}"></td>
    </tr>

    <script type="text/javascript">
      // Function to toggle shipping address form visibility
      function toggleShippingAddress() {
        var isChecked = document.getElementById("check").checked;

        // Show or hide the shipping address form based on checkbox status
        var rows = document.querySelectorAll("#shippingAddressRow, #shippingFirstNameRow, #shippingLastNameRow, #shippingAddress1Row, #shippingAddress2Row, #shippingCityRow, #shippingStateRow, #shippingZipRow, #shippingCountryRow");
        rows.forEach(function(row) {
          row.style.display = isChecked ? "" : "none";
        });
      }
    </script>


  </table>

  <c:if test="${sessionScope.cart.numberOfItems > 0}">
    <input type="submit" class="Button" value="Continue"/>
  </c:if>


</form>
</div>

<%@ include file="../common/bottom.jsp"%>